<template>
  <a-modal title="曝光明细" :width="1180" :footer="null" :visible="visible" @cancel="handleCancel">
    <div :key="tableKey">
      <BaseSearch :search="searchProps" @searchData="updateTable" @resetData="updateTable" />
      <div class="table-top-wrap">
        <div class="table-title">
          <span>列表</span>
        </div>
      </div>
      <BaseTable :loading="loading" :columns="columns" :dataSource="dataSource" :pagination="false">
      </BaseTable>
      <div v-show="dataSource.length > 0" class="page-footer">
        <BasePagination :page-key.sync="pageKey" :get-list="tableInit" />
      </div>
    </div>
  </a-modal>
</template>

<script>
import { searchProps1 as searchProps, columns1 as columns } from './option.js';
import * as Ajax from '@/api/institution';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: true,
      searchProps,
      searchForm: {},
      columns,
      dataSource: [],
      pageKey: {
        pageSize: 10,
        total: 1,
        current: 1,
      },
      tableKey: '',
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.tableInit();
      } else {
        this.dataSource = [];
      }
    },
  },
  methods: {
    updateTable(params = {}) {
      this.searchForm = { ...params };
      this.pageKey = this.$options.data().pageKey;
      this.tableInit();
    },
    // table 初始化
    tableInit() {
      this.loading = true;
      const { current, pageSize } = this.pageKey;
      const params = { pageNum: current, pageSize, ...this.searchForm, institutionId: this.id, type: 2 };
      if (params.time) {
        params.startTime = params.time[0];
        params.endTime = params.time[1];
      } else {
        params.startTime = '';
        params.endTime = '';
      }
      delete params.time;
      Ajax.getCoinDetail(params)
        .then((res) => {
          const { data, totalCount } = res;
          this.dataSource = Array.isArray(data) ? data : [];
          this.pageKey.total = totalCount;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleCancel() {
      this.tableKey = new Date().getTime();
      this.searchForm = {};
      this.pageKey = this.$options.data().pageKey;
      this.dataSource = [];
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 16px;
}

.table-top-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.table-title {
  flex: 1;

  span {
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 18px;
      background-color: #1890ff;
      margin-right: 8px;
      position: relative;
      top: -1px;
    }
  }
}

.standard-table {
  width: 100%;
  // overflow: hidden;
}
</style>
